<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/photo.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.mui-bar-nav{
				background-color:green ;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">照片墙</h1>
		    <div id="header" style="float: right;">
		    	<span class="mui-icon mui-icon-search"></span>
		    	<span class="mui-icon mui-icon-"></span>
		    </div>
		</header>
		<div class="mui-content">
		    <div id="title">
		    	<div class="mui-slider">
		    	    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		    	        <a class="mui-control-item" href="#item1">最新</a>
		    	        <a class="mui-control-item" href="#item2">最热</a>
		    	        <a class="mui-control-item" href="#item3">分类</a>
		    	    </div>
		    	    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
		    	    <div class="mui-slider-group">
		    	        <div id="item1" class="mui-slider-item mui-control-content mui-active">
		    	        	<div id="item1left">
			    	        	<div class="mui-cardleft" id="cardleft1">
									<!--内容区-->
									<div class="mui-card-content"><img src="img/sy1.jpg" ></div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">上传者：王建</div>
								</div>
								<div class="mui-cardleft" id="cardleft2">
									<!--内容区-->
									<div class="mui-card-content"><img src="img/sy2.jpg" ></div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">上传者：王建</div>
								</div>
								<div class="mui-cardleft" id="cardleft3">
									<!--内容区-->
									<div class="mui-card-content"><img src="img/sy3.jpg" ></div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">上传者：王建</div>
								</div>
								<div class="mui-cardleft" id="cardleft4">
									<!--内容区-->
									<div class="mui-card-content"><img src="img/sy4.jpg" ></div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">上传者：王建</div>
								</div>
							</div>
							<div id="item1right">
								<div class="mui-cardright" id="cardright1">
									<!--内容区-->
									<div class="mui-card-content"><img src="img/sy5.jpg" width="auto" height="210px"></div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">上传者：王建</div>
								</div>
								<div class="mui-cardright" id="cardright2">
									<!--内容区-->
									<div class="mui-card-content"><img src="img/sy6.jpg" width="auto" height="210px"></div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">上传者：王建</div>
								</div>
							</div>
		    	        </div>
		    	        <div id="item2mobile" class="mui-slider-item mui-control-content">
		    	        	<div class="mui-card">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media">
									<div class="mui-media-body">
										张三的歌
										<p>发表于 2017-09-30 15:30</p>
									</div>
								</div>
								<!--内容区-->
								<div class="mui-card-content"><img src="img/sy1.jpg" width="auto" height="210px"></div>
								<!--页脚，放置补充信息或支持的操作-->
								<div class="mui-card-footer">上传者：王建</div>
							</div>
							<div class="mui-card">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media">
									<div class="mui-media-body">
										李四的曲
										<p>发表于 2016-8-30 15:30</p>
									</div>
								</div>
								<!--内容区-->
								<div class="mui-card-content"><img src="img/sy4.jpg" width="auto" height="210px"></div>
								<!--页脚，放置补充信息或支持的操作-->
								<div class="mui-card-footer">上传者：王建</div>
							</div>
							<div class="mui-card">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media">
									<div class="mui-media-body">
										贝多芬的悲伤
										<p>发表于 2016-06-30 15:30</p>
									</div>
								</div>
								<!--内容区-->
								<div class="mui-card-content"><img src="img/sy5.jpg" width="auto" height="210px"></div>
								<!--页脚，放置补充信息或支持的操作-->
								<div class="mui-card-footer">上传者：王建</div>
							</div>
		    	        </div>
		    	        <div id="item3mobile" class="mui-slider-item mui-control-content">
		    	        	<ul class="mui-table-view mui-grid-view mui-grid-9">
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/rmcs.jpg"></span>
		    	        	        <div class="mui-media-body">热门城市</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/ha.jpg"></span>
		    	        	        <div class="mui-media-body">人气海岛</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/xg.jpg"></span>
		    	        	        <div class="mui-media-body">港澳台</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/rb.jpg"></span>
		    	        	        <div class="mui-media-body">日韩朝</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/dny.jpg"></span>
		    	        	        <div class="mui-media-body">东南亚</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/yn.jpg"></span>
		    	        	        <div class="mui-media-body">亚洲其他</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/oj.jpeg"></span>
		    	        	        <div class="mui-media-body">欧洲</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/bmz.jpg"></span>
		    	        	        <div class="mui-media-body">北美洲</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/dyz.jpeg"></span>
		    	        	        <div class="mui-media-body">大洋洲</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/nmz.jpg"></span>
		    	        	        <div class="mui-media-body">南美洲</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/fz.jpg"></span>
		    	        	        <div class="mui-media-body">非洲</div>
		    	        	    </a>
		    	        	</li>
		    	        	<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	        	    <a href="#">
		    	        	        <span><img src="img/njz.jpg"></span>
		    	        	        <div class="mui-media-body">南极洲</div>
		    	        	    </a>
		    	        	</li>
		    	        	</ul>
		    	        	
		    	        </div>
		    	    </div>
		    	</div>
		    </div>
		</div>
	</body>

</html>